html,body{
	height: 100vh;
	margin:0px;
}
fieldset{
	border:1px;
	margin:0px;
	padding:0px;
}
.float{

	opacity: 0.1;                                   /* 不透明度 */
    overflow: hidden;                               /* 溢出隐藏 */
    background:radial-gradient(600px 600px,gray,white);                  
                                 
  
    /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
    animation-name: breath;                         /* 动画名称 */
    animation-duration: 3s;                         /* 动画时长3秒 */
    animation-timing-function: ease-in-out;         /* 动画速度曲线：以低速开始和结束 */
    animation-iteration-count: infinite;            /* 播放次数：无限 */
 
    /* Safari and Chrome */
    -webkit-animation-name: breath;                 /* 动画名称 */
    -webkit-animation-duration: 3s;                 /* 动画时长3秒 */
    -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
    -webkit-animation-iteration-count: infinite;    /* 播放次数：无限 */
	
	border-radius:50%;
	float:left;
	width:100%;
	height:100%;
	
	
}
@keyframes breath {
    from { opacity: 0.1; }                          /* 动画开始时的不透明度 */
    50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
    to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */    
}
 
@-webkit-keyframes breath {
    from { opacity: 0.1; }                          /* 动画开始时的不透明度 */
    50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
    to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */
}

@media screen and (max-width:414px){
	main{
		height: 100vh;
		width: 100vw;
		background-image:-webkit-linear-gradient(top,rgb(247, 224, 224)
		,rgb(250, 243, 243),white,rgb(250, 243, 243),rgb(247, 224, 224),gray);
		box-shadow: 2px 2px 20px,gray,2px -2px 20px gray;
		overflow: hidden;
	}
	article{
		height:200px;
		width:100vw;
		margin:auto;
		border-radius:5px;
	}
	#lal_userName,#lal_password,input[type="checkbox"],#lal_cookie{
		display: none;
	}
	input[type='text'],input[type='password']{
		width:100%;
		height: 40px;
		border:1px solid #ccc;
		margin-top:2px;
	}
	#logo{
		width:110px;
		height: 110px;
		margin:auto auto 100px auto;
		background: url(../img/login_logo.jpg) no-repeat 0px 0px/120px 120px;
		border-radius: 55px;
	}
	.btn{
		width:100%;
		height:40px;
	}
}
@media screen and (min-width:800px){
	main{
		height: 300px;
		width: 100vw;
		position:absolute;
		left:0px;
		bottom:0px;
		right:0px;
		top:0px;
		margin:auto;
		background-image:-webkit-linear-gradient(top,gray,rgb(247, 224, 224)
		,rgb(250, 243, 243),white,rgb(250, 243, 243),rgb(247, 224, 224),gray);
		box-shadow: 2px 2px 20px gray,2px -2px 20px gray;
	}
	article{
		height: 150px;
		width:380px;
		margin:auto;
		border-radius:5px;
		position:absolute;
		left:0px;
		bottom:0px;
		right:0px;
		top:0px;
	}
	#logo{
		width:110px;
		height: 110px;
		float: left;
		margin:10px 30px auto 15px;
		background: url(../img/login_logo.jpg) no-repeat 0px 0px/100px 110px;
	}
	#userLogin{
		margin-top:10px;
	}
	input[type='password'],input[type='checkbox']{
		margin-top:10px;
	}
	#loginOperation{
		margin-top:20px;
		margin-left:230px;
	}
	#loginErrorMessage{
		margin-top:120px;
		color: gray;
	}
	
}
